<!DOCTYPE html>
<html>
<body>
<span id="description" style="color: white">
Everything is same to draw-webgl-to-canvas-2d.html except for calling
redundant toDataURL().
Canvas spec allows to call toDataURL() without a context. Some bad things
can happen if we call toDataURL() without a context and then create a context
and then call toDataURL() again.
</span>
<canvas id="preserve-canvas3d" width="100" height="100"></canvas>
<canvas id="preserve-canvas2d" width="100" height="100"></canvas>
<canvas id="nonpreserve-canvas3d" width="100" height="100"></canvas>
<canvas id="nonpreserve-canvas2d" width="100" height="100"></canvas>
<script src="../../../resources/js-test.js"></script>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="resources/draw-webgl-to-canvas-2d.js"></script>
<script>
function createContexts() {
    var preserve_canvas2d = document.getElementById("preserve-canvas2d");
    preserve_canvas2d.toDataURL();
    preserve_ctx2D = preserve_canvas2d.getContext("2d");
    preserve_canvas2d.toDataURL();
    preserve_canvas3D = document.getElementById('preserve-canvas3d');
    preserve_canvas3D.toDataURL();
    preserve_gl = preserve_canvas3D.getContext('webgl', {'preserveDrawingBuffer': true});
    preserve_canvas3D.toDataURL();

    var nonpreserve_canvas2d = document.getElementById("nonpreserve-canvas2d");
    nonpreserve_canvas2d.toDataURL();
    nonpreserve_ctx2D = nonpreserve_canvas2d.getContext("2d");
    nonpreserve_canvas2d.toDataURL();
    nonpreserve_canvas3D = document.getElementById('nonpreserve-canvas3d');
    nonpreserve_canvas3D.toDataURL();
    nonpreserve_gl = nonpreserve_canvas3D.getContext('webgl', {'preserveDrawingBuffer': false});
    nonpreserve_canvas3D.toDataURL();
}
</script>
</body>
</html>
